<template>
  <view class="shopList">
    <view class="marker-layout" v-for="(item, index) in shopList" @click="clickToShopDetail(item)" :key="index">
      <view class="marker-info" @click="markerInfoClick">
        <view class="marker-img">
          <image :src="getImages(item)" mode="aspectFill"></image>
        </view>
        <view class="marker-detail">
          <view class="marker-detail-name">
            <view class="shopName">{{item.storeName}}</view>
            <view class="question">
              <!-- <image src="@/static/images/question.png" mode=""></image> -->
              <text>{{getDistance(item.distance)}}</text>
            </view>
          </view>
          <view class="marker-detail-time">
            <image src="@/static/images/time.png" mode=""></image> <text>营业时间：{{item.storeStartTime}} - {{item.storeEndTime}}</text>
          </view>
          <view class="marker-detail-location">
            <image src="@/static/images/locatedIcon.png" mode=""></image> <text>{{item.storeDetailAddress}}</text>
          </view>
        </view>
      </view>
      <view class="powerBankEnabled" @click="markerInfoClick">
        <van-row>
          <van-col span="5">
            <view class="enabled">
              <image src="@/static/images/powerbook.png" mode=""></image>
              <text>{{item.borrowCellNum > 0 ? '可用' : '不可用'}}</text>
            </view>
          </van-col>
          <van-col class="disabled" span="16">
            <text
              :style="{ color: item.returnCellNum <= 0 ? '#EA6436' : '#00B680' }">{{item.returnCellNum <= 0 ? '不可还（卡槽已满）' : '可还'}}</text>
          </van-col>
        </van-row>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      type: {
        type: String,
        required: true
      },
      shopList: {
        type: [Array, Object],
        required: true
      }
    },
    methods: {
      clickToShopDetail(item) {
       this.$emit('clickToShopDetail', item)
      },
      getImages(item) {
        const env = process.env.NODE_ENV === 'production' ? require('@/utils/prod.env') : require('@/utils/dev.env')
        return `${env.API_BASE_URL}${item.storeImg}`
      },
      getDistance(distance) {
        if (distance >= 1000) {
          return (distance / 1000).toFixed(1) + 'km';
        } else {
          return distance + 'm';
        }
      },
      markerInfoClick() {
        
      }
    }
  }
</script>

<style lang="less" scoped>
  // .shopList {
  //   margin-bottom: 46px;
  // }
  .marker-layout {
    padding: 15px 12.5px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    border-radius: 12rpx;
    margin: 12px 12px 10px;

    .marker-info {
      padding-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #F6F6F6;

      .marker-img {
        width: 70px;
        height: 70px;

        image {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .marker-detail {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 70px;

        .marker-detail-name {
          margin-left: 12px;
          display: flex;
          padding-bottom: 8px;

          .shopName {
            font-size: 15px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
          }

          .question {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 12px;
            color: #666666;
            flex: 0.4;
            font-family: 'PingFang-SC-Regular', sans-serif;

            image {
              width: 12px;
              height: 12px;
              object-fit: contain;
              margin-top: 2px;
              margin-right: 5px;
            }
          }
        }

        .marker-detail-time,
        .marker-detail-location {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #555555;
          margin-left: 12px;
          padding-bottom: 8px;

          image {
            width: 12px;
            height: 12px;
            object-fit: contain;
          }

          text {
            margin-left: 5px;
          }
        }
      }
    }

    .powerBankEnabled {
      padding: 0px 12px;
      margin-top: 25rpx;
      height: 72rpx;
      line-height: 72rpx;
      background-color: #F8F8F8;

      .enabled {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #105BDE;

        image {
          width: 13px;
          height: 17px;
          object-fit: contain;
        }

        text {
          margin-left: 8px;
        }
      }

      .disabled {
        font-size: 14px;
        color: #EA6436;

        text {
          margin-left: 25px;
        }
      }
    }
  }
</style>
